<template>
  <!-- 模板 ref -->
  <h1 ref="title">Hello vue3</h1>
</template>

<script setup lang="ts">
// 运行过程：
//   1. 先运行 setup 的代码，创建一个用于关联模板 ref 的响应式对象
//   2. 读取模板中的 ref 属性，自动进行关联
//   3. 组件挂载完毕，把模板中的 DOM 标签内存地址赋值给 ref 对象的 value 属性
import { onMounted, ref } from 'vue'

const title = ref<HTMLHeadingElement>()
console.log(1, title.value) // null (setup 钩子执行时，组件还没挂载)

// 组件挂载完毕后
onMounted(() => {
  // 组件挂载完毕后可以获取到 DOM 元素了
  console.log(2, title.value) // <h1>

  // 如果 title.value 为非空
  if (title.value) {
    // 修改文本内容
    title.value.innerText = 'HaHa'
  }
})
</script>
